<template>
	<view class="content">
		<z-paging ref="paging">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<div style="background: #fff;padding: 12px;">
					<div class="rzhead">
						<div class="rzItem">
							<div class="rzyuan rzyuanS">1</div>
							<div class="rztxt rztxtS">油站信息</div>
						</div>
						<div class="rzhline" :class="step==2?'rzyuanS':''"></div>
						<div class="rzItem">
							<div class="rzyuan" :class="step==2?'rzyuanS':''">2</div>
							<div class="rztxt" :class="step==2?'rztxtS':''">认证信息</div>
						</div>
					</div>
				</div>
			</template>

			<div v-if="step==1">
				<div class="rzTitle">油站信息</div>
				<div class="zrzBox-w">
					<div class="zbox-formItem">
						<div class="formItem-lef">油站名称</div>
						<uni-easyinput type="text" v-model="form1.stationName" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">油站类型</div>
						<lfj-dropdown-box v-model="form1.stationType" :localdata="typeList" filterable
							:map="{value:'dictValue',text:'dictLabel'}" :clear="false" :placeholder="'请选择'"
							style="width: 450rpx;margin-right: -5px;"></lfj-dropdown-box>
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">营业时间</div>
						<div class="zflex zcenter">
							<picker mode="time" :value="stime" start="00:00" end="23:59" @change="bindDateChange">
								<span class="uni-input" v-if="stime">{{stime}}</span>
								<span class="timer-p" v-else>开始时间</span>
							</picker>
							<div style="padding: 0 4px;">-</div>
							<picker mode="time" :value="etime" start="00:00" end="23:59" @change="bindDateChange2">
								<span class="uni-input" v-if="etime">{{etime}}</span>
								<span class="timer-p" v-else>结束时间</span>
							</picker>
						</div>
					</div>


					<div class="zbox-formItem">
						<div class="formItem-lef">所在地区</div>

						<div class="zflex zcenter">
							<div class="timer-p" @click="visible=true" v-if="!form1.province">请选择</div>
							<div v-else @click="visible=true">{{form1.province}}{{form1.city}}{{form1.district}}</div>
							<uni-icons type="right" size="14"
								style="color: rgb(153, 153, 153);padding-left: 4px;"></uni-icons>
							<cityPicker :column="3" :default-value="defaultValue" :mask-close-able="true"
								@confirm="confirm1" @cancel="cancel" :visible="visible" />
						</div>
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">详细地址</div>
						<uni-easyinput type="text" v-model="form1.address" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">经纬度</div>
						<div class="zflex zcenter" @click="choseArea">
							<div class="timer-p" v-if="!form1.latitude">请选择</div>
							<div v-else>{{form1.latitude}},{{form1.longitude}}</div>
							<uni-icons type="right" size="14"
								style="color: rgb(153, 153, 153);padding-left: 4px;"></uni-icons>

						</div>
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">业务联系人</div>
						<uni-easyinput type="text" v-model="form1.leaderName" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">联系电话</div>
						<uni-easyinput type="number" v-model="form1.leaderPhone" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
				</div>
			</div>

			<div v-if="step==2">
				<div class="rzTitle">企业信息</div>
				<div class="zrzBox-w">
					<div class="zbox-formItem">
						<div>
							<div style="margin-bottom: 12px;">营业执照</div>
							<l-upload @complete="complete1" :images="filelist1" :limit="1" :width="328" :height="200"
								:serverUrl="'https://www.hnthht.com/stage-api/business/oss/upload'"
								class="rzImg"></l-upload>

							<div class="zjDes">上传营业执照</div>
						</div>
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">公司名称</div>
						<uni-easyinput type="text" v-model="form2.name" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">统一社会信用代码</div>
						<uni-easyinput type="text" v-model="form2.bpnCode" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>

					<div class="zbox-formItem">
						<div class="formItem-lef">注册地</div>
						<div class="zflex zcenter" @click="visible=true">
							<div class="timer-p" v-if="!form2.province">请选择</div>
							<div v-else>{{form2.province}}{{form2.city}}{{form2.area}}</div>
							<uni-icons type="right" size="14"
								style="color: rgb(153, 153, 153);padding-left: 4px;"></uni-icons>
						</div>
						<cityPicker :column="3" :default-value="defaultValue2" :mask-close-able="true"
							@confirm="confirm" @cancel="cancel" :visible="visible" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">详细地址</div>
						<uni-easyinput type="text" v-model="form2.address" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
				</div>
				<div class="rzTitle">法人信息</div>
				<div class="zrzBox-w">
					<div class="zbox-formItem">
						<div style="margin-right: auto;">
							<l-upload @complete="complete2" :images="filelist2" :limit="1" :width="328" :height="200"
								:serverUrl="'https://www.hnthht.com/stage-api/business/oss/upload'"
								:upLoadbg="'/static/uploadBg1.png'" class="rzImg"></l-upload>

							<div class="zjDes">人像面</div>
						</div>
						<div>
							<l-upload @complete="complete3" :images="filelist3" :limit="1" :width="328" :height="200"
								:serverUrl="'https://www.hnthht.com/stage-api/business/oss/upload'"
								:upLoadbg="'/static/uploadBg2.png'" class="rzImg"></l-upload>

							<div class="zjDes">国徽面</div>
						</div>
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">法人姓名</div>
						<uni-easyinput type="text" v-model="form2.leader" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">法人身份证号</div>
						<uni-easyinput type="text" v-model="form2.idCardCode" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
				</div>

				<div class="rzTitle">资质信息</div>
				<div class="zrzBox-w">
					<div class="zbox-formItem">
						<div>
							<div style="margin-bottom: 12px;">危险化学品经营许可证</div>
							<l-upload @complete="complete4" :images="filelist4" :limit="1" :width="328" :height="200"
								:serverUrl="'https://www.hnthht.com/stage-api/business/oss/upload'"
								class="rzImg"></l-upload>

							<div class="zjDes">上传危化品许可证</div>
						</div>
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">证书编号</div>
						<uni-easyinput type="text" v-model="form2.permitCode" placeholder="请输入" class="dzsameIpt"
							placeholderStyle="font-size:14px;" :inputBorder="false" />
					</div>
					<div class="zbox-formItem">
						<div class="formItem-lef">有效期限</div>
						<div class="zflex zcenter" style="width: 460rpx;">
							<uni-datetime-picker type="date" :clear-icon="false" :border="false"
								v-model="form2.permitRangeStart" placeholder="开始日期" />
							<div style="padding: 0 4px;">-</div>
							<uni-datetime-picker type="date" :clear-icon="false" :border="false"
								v-model="form2.permitRangeEnd" placeholder="结束日期" />
							<!-- <picker mode="date" :value="form2.permitRangeStart" :start="'2000-12-30'"
								:end="'2999-12-30'" @change="bindTimeS1">
								<span class="uni-input" v-if="form2.permitRangeStart">{{form2.permitRangeStart}}</span>
								<span class="timer-p" v-if="!form2.permitRangeStart">开始时间</span>
							</picker>
							<div style="padding: 0 4px;">-</div>
							<picker mode="date" :value="form2.permitRangeEnd" @change="bindTimeS2">
								<span class="uni-input" v-if="form2.permitRangeEnd">{{form2.permitRangeEnd}}</span>
								<span class="timer-p" v-else>结束时间</span>
							</picker> -->
						</div>
					</div>

				</div>
			</div>



			<div style="height: 100px;"></div>
			<div class="fix-bom">
				<div style="text-align: center;width: 80px;" @click="callKefu">
					<image class="iconkf" src="/static/images/icon_kf.png"></image>
					<div class="txtkf">客服电话</div>
				</div>
				<div class="btn-pay btnT3" v-if="step==1" @click="submitStep1">下一步</div>
				<div class="btn-pay btnT3" v-if="step==2" @click="submitStep2">提交申请</div>
			</div>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		</z-paging>

	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		getDicts,
		addStation,
		editStation,
		addCompany,
		editCompany,
		detailsStation
	} from '@/request/api.js'
	import {
		testMobile
	} from '@/utils/common'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				step: 1,
				val: '',
				stime: '',
				etime: '',
				stime2: '',
				etime2: '',
				filelist1: [],
				filelist2: [],
				filelist3: [],
				filelist4: [],
				form1: {},
				form2: {},
				visible: false,
				str: '',
				defaultValue: '150602',
				defaultValue2: '150602',
				//defaultValue: ['河北省', '唐山市', '丰南区'],
				typeList: [],
				status: null, //100是修改
				stationId: null,
			}
		},
		mounted() {
			this.getOtype()
		},
		onLoad(e) {
			this.status = e.status
			if (e.status == 0) {
				this.step = 1
				this.resetForm1()
				this.resetForm2()
				this.getDetails()
			} else if (e.status == 4) {
				this.step = 2
				this.stationId = e.stationId
				this.getDetails()
			} else if (e.status == 100) {
				this.step = 1
				this.stationId = e.stationId
				this.getDetails()
			}
		},

		onShow() {},
		methods: {
			getOtype() {
				getDicts('station_type').then(res => {
					console.log('resss', res)
					this.typeList = res.data
				})
			},
			resetForm1() {
				this.form1 = {
					stationName: '', //油站名称
					stationType: '', //油站类型
					openTime: '', //营业时间
					province: '',
					city: '',
					district: '',
					latitude: null,
					longitude: null,
					address: '',
					provinceCode: null,
					cityCode: null,
					districtCode: null,
					leaderName: '', //联系人姓名
					leaderPhone: '', //联系人电话
				}
				this.stime = ''
				this.etime = ''
			},
			resetForm2() {
				this.form2 = {
					stationId: '',
					bpnImg: '', //营业执照照片
					name: '', //企业名称
					bpnCode: '', //社会统一信用代
					province: '',
					city: '',
					area: '',
					address: '',
					idCardFront: '',
					idCareBack: '',
					leader: '', //法人姓名
					idCardCode: '', //法人身份证号
					permitImg: '', //	危化品许可证照片
					permitCode: '', //危化品许可证编号
					permitRangeStart: '',
					permitRangeEnd: '',
				}
			},
			confirm1(val) {

				this.visible = false
				this.form1.province = val.provinceName
				this.form1.city = val.cityName
				this.form1.district = val.areaName
				this.form1.provinceCode = val.pcode
				this.form1.cityCode = val.ccode
				this.form1.districtCode = val.code
			},
			confirm(val) {
				this.visible = false
				this.form2.province = val.provinceName
				this.form2.city = val.cityName
				this.form2.area = val.areaName
			},
			cancel() {
				this.visible = false
			},

			choseArea() {
				const that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置', res)
						// address: "内蒙古自治区鄂尔多斯市东胜区广场街", latitude: 39.817135, name: "东胜区维邦大厦(广场街北)", longitude: 109.94128,
						that.form1.latitude = res.latitude
						that.form1.longitude = res.longitude
					}
				})
			},

			complete1(e) { //营业执照
				this.form2.bpnImg = e.imageArr[0]
			},
			complete2(e) { //法人
				this.form2.idCardFront = e.imageArr[0]
			},
			complete3(e) { //法人
				this.form2.idCareBack = e.imageArr[0]
			},
			complete4(e) { //危险化学品
				this.form2.permitImg = e.imageArr[0]
			},

			submitStep1() {
				// const data = {
				// 	address: "222",
				// 	city: "鄂尔多斯市",
				// 	cityCode: "1506",
				// 	district: "东胜区",
				// 	districtCode: "150602",
				// 	latitude: 39.82127,
				// 	leaderName: "2",
				// 	leaderPhone: "18042691823",
				// 	longitude: 109.96144,
				// 	openTime: "00:00-01:00",
				// 	province: "内蒙古自治区",
				// 	provinceCode: "15",
				// 	stationName: "油站22",
				// 	stationType: "0",
				// }
				if (!this.form1.stationName) {
					uni.$u.toast('请输入油站名称')
					return
				}
				if (!this.form1.stationType) {
					uni.$u.toast('请选择油站类型')
					return
				}
				if (!this.stime && !this.etime) {
					uni.$u.toast('请选择营业时间')
					return
				}
				if (!this.form1.province) {
					uni.$u.toast('请选择所在地区')
					return
				}
				if (!this.form1.latitude) {
					uni.$u.toast('请选择位置')
					return
				}
				if (!this.form1.address) {
					uni.$u.toast('请输入详细地址')
					return
				}
				if (!this.form1.leaderName) {
					uni.$u.toast('请输入联系人姓名')
					return
				}
				if (!testMobile(this.form1.leaderPhone)) {
					return
				}

				this.form1.openTime = this.stime + '-' + this.etime
				if (this.status == 100) { //修改
					editStation(this.form1).then(res => {
						this.step = 2
					})
				} else {
					addStation(this.form1).then(res => {
						this.stationId = res.data.stationId
						this.step = 2
					})
				}
			},

			submitStep2() {
				if (!this.form2.bpnImg) {
					uni.$u.toast('请上传营业执照')
					return
				}
				if (!this.form2.name) {
					uni.$u.toast('请输入公司名称')
					return
				}
				if (!this.form2.bpnCode) {
					uni.$u.toast('请输入社会统一信用代码')
					return
				}
				if (!this.form2.province) {
					uni.$u.toast('请选择注册地')
					return
				}
				if (!this.form2.address) {
					uni.$u.toast('请输入详细地址')
					return
				}
				if (!this.form2.idCardFront || !this.form2.idCareBack) {
					uni.$u.toast('请上传法人身份证')
					return
				}
				if (!this.form2.leader) {
					uni.$u.toast('请输入法人姓名')
					return
				}
				if (!this.form2.idCardCode) {
					uni.$u.toast('请输入法人身份证号')
					return
				}
				if (!this.form2.permitImg) {
					uni.$u.toast('请上传危化品许可证')
					return
				}
				if (!this.form2.permitCode) {
					uni.$u.toast('请输入危化品许可证编号')
					return
				}
				if (!this.form2.permitCode) {
					uni.$u.toast('请输入危化品许可证编号')
					return
				}

				if (!this.form2.permitRangeStart || !this.form2.permitRangeEnd) {
					uni.$u.toast('请选择危化品许可证有效期')
					return
				}

				this.form2.stationId = this.stationId
				if (this.status == 100) { //status=100修改
					editCompany(this.form2).then(res => {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							this.goPage('/pages/my/company/detail?id=' + this.stationId)
						}, 1000)

					})
				} else {
					addCompany(this.form2).then(res => {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							this.goPage('/pages/my/company/detail?id=' + this.stationId)
						}, 1000)
					})
				}
			},

			getDetails() {
				detailsStation(this.stationId).then(res => {
					this.form1 = res.data
					const timer = res.data.openTime.split('-')
					this.stime = timer[0]
					this.etime = timer[1]
					if (this.status == 100) {
						this.form2 = res.data.oilCompany
						this.filelist1 = [this.form2.bpnImg]
						this.filelist2 = [this.form2.idCardFront]
						this.filelist3 = [this.form2.idCareBack]
						this.filelist4 = [this.form2.permitImg]
					}
				})
			},
			bindDateChange(e) {
				this.stime = e.detail.value
			},
			bindDateChange2(e) {
				this.etime = e.detail.value
			},
			bindTimeS1(e) {
				this.form2.permitRangeStart = e.detail.value
			},
			bindTimeS2(e) {
				this.form2.permitRangeEnd = e.detail.value
			},

			callKefu() {
				const phone = getApp().globalData.kefuPhone
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {

					}
				})
			},
			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			}
		}
	}
</script>

<style scoped>
	.btnT3 {
		width: calc(100% - 80px);
		background: #4475EE;
		border: 1px solid #4475EE;
	}
</style>
<style>
	.zrzBox-w .uni-easyinput {
		text-align: right;
	}
</style>